<template>
	<div :class="['es-screen-container', store.theme]">
		<div ref="screenRef" class="es-screen">
			<Header />

			<div class="es-screen-main">
				<div class="es-screen-center">
					<Center />
				</div>
				<div class="es-screen-right">
					<Right />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Header from "./components/Header.vue";
import { useResize } from "@/utils/useResize";
import Right from "./components/right/index.vue";
import Center from "./components/center/index.vue";
import { useScreenStore } from "@/store";
import useData from "./use-data";
import useStart from "./use-start";
import useNotification from "./use-notification";
import { provide } from "vue";

const store = useScreenStore();
const { screenRef } = useResize();

// 数据
const { onGetData, records, alarms, breakTime } = useData();

// 监测操作
const { loading, running, onStart, resetLoading, onReset, monitorDuration } =
	useStart(onGetData);

// 报警
useNotification(alarms, running, breakTime);

provide("onGetData", onGetData);
provide("records", records);
provide("alarms", alarms);

provide("loading", loading);
provide("running", running);
provide("onStart", onStart);
provide("resetLoading", resetLoading);
provide("onReset", onReset);
provide("monitorDuration", monitorDuration);
</script>

<style lang="scss" scoped>
.es-screen-container {
	--es-screen-width: 1920px;
	--es-screen-height: 1080px;
	--es-header-height: 72px;
	--es-block-bg: #222733;
	--es-screen-bg: rgb(22, 21, 34);
	--es-screen-text-color: #fff;
	--el-font-size-base: 24px;
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	overflow: hidden;
	background: var(--es-screen-bg);
	color: var(--es-screen-text-color);
}
.es-screen {
	position: absolute;
	user-select: none;
	top: 50%;
	left: 50%;
	width: var(--es-screen-width);
	height: var(--es-screen-height);
	margin-left: calc(var(--es-screen-width) * 0.5 - var(--es-screen-width));
	margin-top: calc(var(--es-screen-height) * 0.5 - var(--es-screen-height));
	background-size: 100% 100%;
	padding: 0 20px;
	&-main {
		position: relative;
		display: flex;
		height: calc(100% - var(--es-header-height));
	}
	&-center {
		flex: 1;
		// width: calc(var(--es-screen-width) - 500px);
	}
	&-left,
	&-right {
		width: 1000px;
	}
}
.light {
	--es-screen-bg: rgb(238, 238, 238);
	--es-block-bg: #fff;
	--es-screen-text-color: rgb(22, 21, 34);
}
</style>
